import React from "react";
import { BaseReactElementState, BaseReactElement, reactControl, BaseReactElementControl, CookieUtil } from "pao-aop-client";
import { addon } from "pao-aop";
import { Form } from "antd";
import { List, Button, WhiteSpace, Toast, Modal } from 'antd-mobile';
import { remote } from "src/projects/remote";
// import { beforeUpload } from "src/projects/app/util-tool";
import { ROUTE_PATH } from "src/projects/app/util-tool";
import { FileUploadBtn } from "src/business/components/buss-components/file-operation-btn/file-upload-btn";
// import { IntelligentElderlyCareAppStorage } from "src/projects/app/appStorage";
import { AppServiceUtility } from 'src/projects/app/appService';
const alert = Modal.alert;

// const alert = Modal.alert;
/**
 * 组件：高原补贴长者信息录入状态
 */
export interface OldApplyPersonelInfoInsertState extends BaseReactElementState {
    photo?: any;
    id_card?: any;
    params?: any;
    user_info?: any;
    type?:any;
}
/**
 * 组件：高原补贴长者信息录入
 * 描述
 */
export class OldApplyPersonelInfoInsert extends BaseReactElement<OldApplyPersonelInfoInsertControl, OldApplyPersonelInfoInsertState> {
    constructor(props: any) {
        super(props);
        this.state = {
            photo: [],
            id_card: '',
            params: {},
            user_info: {},
            type: '他人协助'
        };
    }
    componentDidMount() {
        // let params = JSON.parse(decodeUrlParam(this.props.match!.params.key));
        // console.log(params);
        // this.setState({
        //     params
        // });
        // 判断是否登录
        // AppServiceUtility.personnel_service.get_user_session!()!
        //     .then((data: any) => {
        //         if (!data) {
        //             this.props.history!.push(ROUTE_PATH.login);
        //             return;
        //         }
        //     });
        // if (CookieUtil.read('user_info') !== undefined) {
        //     // cookies 读取数据
        //     let user_info: any = CookieUtil.read('user_info');
        //     this.setState({
        //         photo: user_info.photo
        //     });
        // }
    }

    submit = () => {
        const { photo, type } = this.state;
        if (photo.length === 0) {
            Toast.fail('请上传人脸照片', 1);
            return false;
        }
        // 从cookies读取数据
        let user_info: any = CookieUtil.read('user_info');
        this.setState({
            user_info: user_info
        });
        user_info = { ...user_info, photo, type };
        console.log(user_info);
        AppServiceUtility.allowance_service.apply_old_age_allowance!(user_info)!
            .then((data: any) => {
                console.log(data);
                if (data[0].result === '认证成功') {
                    alert('认证结果', data[0].result, [
                        {
                            text: '确认', onPress: () => {
                                this.props.history!.push(ROUTE_PATH.oldapplyState);
                            }
                        },
                    ]);
                } else if (data[0].result === '你本月已完成认证，无需重复操作') {
                    alert('认证结果', data[0].result, [
                        {
                            text: '确认', onPress: () => {
                                this.props.history!.push(ROUTE_PATH.oldapplyState);
                            }
                        },
                    ]);
                } else {
                    alert('认证结果', data[0].result, [
                        {
                            text: '确认', onPress: () => {
                                CookieUtil.save('user_info', JSON.stringify(this.state.user_info));
                                let user_info: any = CookieUtil.read('user_info');
                                console.log(user_info);
                                return;
                            }
                        },
                    ]);
                }

            });
        CookieUtil.remove("user_info");
        return false;
    }

    imgChange = (e: any) => {
        console.log(e);
        this.setState({
            photo: e
        });
        // // 从cookies读取数据
        // let user_info: any = CookieUtil.read('user_info');
        // let photo = e;
        // if (user_info.photo) {
        //     user_info.photo = photo;
        //     CookieUtil.save('user_info', JSON.stringify(user_info));
        // } else {
        //     let param = { ...user_info, photo };
        //     CookieUtil.save('user_info', JSON.stringify(param));
        // }
    }

    render() {
        const { getFieldDecorator } = this.props.form!;
        return (
            <div>
                <Form>
                    <List renderHeader={() => '请上传人脸照片或拍照(仅支持jpeg格式)'}>
                        {getFieldDecorator('photo', {
                            initialValue: this.state.photo,
                            rules: [{
                                required: true,
                            }],
                        })(
                            <FileUploadBtn list_type={"picture-card"} contents={"plus"} action={remote.upload_url} onChange={this.imgChange} upload_amount={1} />
                        )}
                    </List>
                    {/* <List renderHeader={'请上传人脸照片（10-20kb）'} className="my-list">
                        <FileUploadBtn list_type={"picture-card"} contents={"plus"} action={remote.upload_url} beforeUpload={beforeUpload} onChange={this.imgChange} />
                    </List> */}
                    {/* <div>{
                        this.state.photo.length > 0 ?
                            this.state.photo.map((item: any) => {
                                <img src={item} alt="" style={{ width: '100%', height: '300px' }} />;
                            })
                            :
                            ''
                    }</div> */}
                    <WhiteSpace size="lg" />
                    <WhiteSpace size="lg" />
                    <WhiteSpace size="lg" />
                    <WhiteSpace size="lg" />
                    <Button type="primary" style={{ position: 'fixed', bottom: '0px', width: '100%' }} onClick={this.submit}>下一步</Button>
                </Form>
            </div >
        );
    }
}

/**
 * 控件：高原补贴长者信息录入控制器
 * 描述
 */
@addon('OldApplyPersonelInfoInsert', '高原补贴长者信息录入', '高原补贴长者信息录入')
@reactControl(Form.create<any>()(OldApplyPersonelInfoInsert), true)
export class OldApplyPersonelInfoInsertControl extends BaseReactElementControl {
    constructor() {
        super();
    }
}